<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="fm.js"></script>
</head>
<body>
	<div id="tx" style="width: 300px;height: 300px;border: solid 1px #ccc;background: #eca;position: relative;">
			<div class="man" style="position: absolute;right: 5px;top: 5px;border: solid 1px #ccc;padding:2px 5px;background: #a34;">close</div>
	</div>
	<script type="text/javascript">
	$(function(){
		FM.Class('X.V',{
			parent:FM.MVC.View,
			els:{
				close:'.man',
				el:'#tx'
			},
			init:function(m){
				this.m = m;
				this.e = $(this.els.el);
				this.e.css('background',m.color);
				this.clicked = new FM.Event(this);
				
				var _this = this;
				this.e.click(function(e){
					var r = Math.ceil(Math.random()*100),
						g = Math.ceil(Math.random()*100),
						b = Math.ceil(Math.random()*100),
						color = 'rgb('+r+','+g+','+b+')';
					_this.setColor(color);
					_this.clicked.fire(color);
					window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
				}); 
				$('.man').click(function(e){
					e.stopPropagation();
				});
			},
			setColor:function(color){
				this.e.css('background',color);
			}
		});
		
		FM.Class('X.M',{
			parent:FM.MVC.Model,
			init:function(){
				this.color = '#afcb73';
				this.changed = new FM.Event(this);
			},
			changeColor:function(color){
				this.color = color;
				this.changed.fire(color);
			}
		});
		FM.Class('X.C',{
			parent:FM.MVC.Controller,
			init:function(v,m){
				v.clicked.add(m.proxy(m.changeColor));
				m.changed.add(v.proxy(v.setColor));
			}
		});
		var m = new X.M,
		    v = new X.V(m);
		new X.C(v,m);
		v.setColor('#0f0');
		
		
		var aaa = new FM.Map();
		aaa.put('a','b');
		aaa.put('bc','xxx');
	});
	</script>
</body>
</html>